<template>
  <div class="bar_chart" :id="idName">条形图</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
      type: String,
      default: "XXX条形图"
    },
  vm: {
      type: Object,
      default: function() {
        return {
          yAxis: "yAxis",
          names: "names",
          values: "values",
        };
      },
    }
});
let { idName, title, vm } = toRefs(props);
let option=ref({
  title: {
          text: "XXX条形图",
          left: "center",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
           data:[],
          type: 'scroll',
          orient: 'horizontal',
          y: 'bottom'
        },
        xAxis: [{
          type: 'value'
        }],
        yAxis: [{
          type: 'category',
          data:[]
        }],
        series: [
          // {
          // 	name: 'Forest',
          // 	type: 'bar',
          // 	barGap: 0,
          // 	emphasis: {
          // 		focus: 'series'
          // 	},
          // 	data: [320, 332, 301, 334, 390]
          // },
        ]
})
const series = computed(() => {
	let listObj = vm.value.names;
	let values = vm.value.values;
	let seriesobj = [];
	let labelOption = {
		show: true,
		position: "insideBottom",
		distance: 15,
		align: 'left',
		verticalAlign: 'middle',
		rotate: 90,
		formatter: '{c}  {name|{a}}',
		fontSize: 16,
		rich: {
			name: {}
		}
	};
	for (let i=0;i<listObj.length;i++){
		let data = []
		for (let j=0;j<values.length;j++){
			data.push(values[j][i]);
		}
		let dict_type = {
				name: listObj[i],
				type: 'bar',
				barGap: 0,
				// label: labelOption,
				emphasis: {
					focus: 'series'
				},
				data: data
		}
		seriesobj.push(dict_type);
	}
	return seriesobj;
});
let init_chart = () => {
	let optionObj = option.value;
	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}

  var seriesobj = series.value;
  optionObj.series = seriesobj;
  var yAxis = optionObj.yAxis[0];
  yAxis.data = vm.value.xAxis;

  if (yAxis.data.length>4){
    optionObj.axisLabel= {
      interval: 0, //使x轴文字显示全
      formatter: function (params) {
        let newParamsName = '';
        const paramsNameNumber = params.length; // 文字总长度
        const provideNumber = 4; //一行显示几个字
        const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (let p = 0; p < rowNumber; p++) {
            const start = p * provideNumber;
            const end = start + provideNumber;
            const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      },
    }
  }
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
onMounted(() => {
	setTimeout(()=>{
	 init_chart();
	},200)

});
</script>
